<template>
	<view class="content">
		<Header color="black" />
		<view class="page-area">
			<view class="user_info" v-if="userInfo" :class="{svip:userInfo.memberLevelId}">
				<image src="/static/vbs.jpg" mode="" class="vbs" v-if="userInfo.memberLevelId"></image>
				<view class="stext">
					<view class="image" @click="handleToInfo">
						<image :src="userInfo.icon || '/static/avatar.png'" mode=""></image>
					</view>
					<view class="text" @click="handleToInfo">
						<view class="t1"> 
							{{userInfo.nickname}}
						</view> 
						<view class="sss">
							<view class="sv" v-if="userInfo.memberLevelId">
								{{userInfo.memberLevelName}}
							</view>
							<image v-if="userInfo.memberIcon" :src="userInfo.memberIcon" mode="heightFix"></image>
						</view>
						<view class="time" v-if="userInfo.memberLevelId">
							会员码：{{userInfo.memberCode}}
						</view>
						<view class="t2"  v-else>
							普通用户
						</view>
					</view>
					<view class="vipCode" v-if="userInfo.memberLevelId" @click="show = true">
						<image src="/static/code.png" mode=""></image>
						<u-icon name="arrow-right" color="#FFEAC8" size="16"></u-icon>
					</view>
				</view>
			</view>
			<view class="user_info" v-else @click="handleToLogin">
				<view class="stext">
					<view class="image">
						<image src="/static/avatar.png" mode=""></image>
					</view>
					<view class="text">
						<view class="t1">
							还未登录
						</view> 
						<view class="t2">
							点击登录
						</view> 
					</view>
				</view> 
			</view>
			<view class="vip"  v-if="userInfo && !userInfo.memberLevelId" @click="handleToAuthPage('/pages/user/vip')">
				<text>开通会员·享5折特惠及9大特权</text>
				<view class="btn">
					查看详情
				</view>
			</view> 
			<view class="main_box">
				<view class="item" @click="handleToAuthPage('/pagesA/invitation/share')">
					<image src="/static/user/icon1.png" mode=""></image>
					<text>邀请好友</text>
				</view>
				<view class="item" @click="handleToAuthPage('/pagesA/invitation/index')">
					<image src="/static/user/icon2.png" mode=""></image>
					<text>我的金库</text>
				</view>
				<view class="item" @click="handleToAuthPage('/pages/order/index')">
					<image src="/static/user/icon3.png" mode=""></image>
					<text>我的订单</text>
				</view>
				<view class="item" @click="handleToStore">
					<image src="/static/user/icon4.png" mode=""></image>
					<text>我的商户</text>
				</view>
			</view>
			<view class="other_box">
				<view class="title">
					其他服务
				</view>
				<view class="sbox">
					<view class="item" @click="handleToAuthPage('/pages/user/vip')">
						<image src="/static/user/c1.png" mode=""></image>
						<text class="text">会员中心</text>
						<u-icon name="arrow-right" color="#272636" size="14"></u-icon>
					</view>
					<view class="item" @click="handleToAuthPage('/pagesA/group/index')">
						<image src="/static/user/c2.png" mode=""></image>
						<text class="text">拼团商城</text>
						<u-icon name="arrow-right" color="#272636" size="14"></u-icon>
					</view>
					<view class="item" @click="handleToAuthPage('/pagesA/group/order')">
						<image src="/static/user/c3.png" mode=""></image>
						<text class="text">拼团订单</text>
						<u-icon name="arrow-right" color="#272636" size="14"></u-icon>
					</view>
					<view class="item" @click="handleToAuthPage('/pages/information/index')">
						<image src="/static/user/c4.png" mode=""></image>
						<text class="text">我的消息</text>
						<u-icon name="arrow-right" color="#272636" size="14"></u-icon>
					</view>
					<view class="item" @click="handleToAuthPage('/pagesA/join/index')">
						<image src="/static/user/c5.png" mode=""></image>
						<text class="text">加入我们</text>
						<u-icon name="arrow-right" color="#272636" size="14"></u-icon>
					</view>
					<view class="item" @click="handleToAuthPage('/pagesA/join/about')">
						<image src="/static/user/c6.png" mode=""></image>
						<text class="text">关于我们</text>
						<u-icon name="arrow-right" color="#272636" size="14"></u-icon>
					</view>
					<view class="item" @click="handleToAuthPage('/pages/user/address/index')">
						<image src="/static/user/c7.png" mode=""></image>
						<text class="text">地址管理</text>
						<u-icon name="arrow-right" color="#272636" size="14"></u-icon>
					</view>
					<view class="item" v-if="userInfo" @click="handleLoginOut">
						<image src="/static/user/c8.png" mode=""></image>
						<text class="text">退出登录</text>
						<u-icon name="arrow-right" color="#272636" size="14"></u-icon>
					</view>
				</view>
			</view>
		</view>
		
		<u-overlay :show="show">
			<view class="vipCodeBox">
				<view class="sbox">
					<image src="/static/col.png" class="col" mode="" @click="show = false"></image>
					<image :src="userInfo.shardQrCode" class="code" mode=""></image>
				</view>
			</view>
		</u-overlay>
		
		<tabbar :index="4"></tabbar>
	</view>
</template>

<script>
	import tabbar from "@/components/tabbar.vue"
	export default {
		components:{
			tabbar
		},
		data() {
			return {
				show: false
			}
		},
		computed: {
			userInfo() {
				return this.$store.state.userInfo 
			}
		},
		onLoad() {

		},
		methods: {
			handleToStore(){
				if(!uni.getStorageSync('token')){
					uni.reLaunch({
						url:"/pages/user/login"
					})
					return
				}
				if(this.isSubmit()){ 
					uni.navigateTo({
						url:"/pagesA/store/index"
					})
				}else{
					uni.showToast({
						title:"暂无权限",
						icon:"none"
					})
				}
			},
			isSubmit(){ 
				 const arr = this.userInfo.memberLevelId.split(',');
				return ['5', '6','7'].some(num => arr.includes(num));
			},
			handleToInfo(){
				uni.navigateTo({
					url:"./info"
				})
			},
			handleLoginOut(){
				uni.showModal({
					title: '提示',
					content: '确认要退出登录吗',
					success:   (res) => {
						if (res.confirm) { 
							uni.removeStorageSync("token")  
							uni.removeStorageSync("payInfo")   
							uni.removeStorageSync("confirmOrderInfo")   
							this.$store.commit('setUserInfo',"")  
							uni.switchTab({
								url:"/pages/index/index"
							}) 
						}  
					}
				});
			},
			handleToLogin(){
				uni.reLaunch({
					url:"/pages/user/login"
				})
			},
			handleToAuthPage(url){
				if(uni.getStorageSync('token')){
					uni.navigateTo({
						url
					})
				}else{
					uni.reLaunch({
						url:"/pages/user/login"
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped> 
	.page-area{ 
		padding: 24rpx;
		box-sizing: border-box;
	}
	.other_box{
		margin-top: 34rpx;
		.title{
			font-size: 32rpx;
			font-weight: bold;
			color: #191919;
			margin-bottom: 32rpx;
		}
		.sbox{
			background: #F8F8F8;
			padding: 36rpx;
			.item{
				display: flex;
				align-items: center;
				margin-bottom: 64rpx;
				&:last-child{
					margin-bottom: 0;
				}
				image{
					width: 44rpx;
					height: 44rpx;
					margin-right: 32rpx;
				}
				.text{
					font-size: 28rpx;
					color: #1C1C1C;
				}
				::v-deep .u-icon{
					margin-left: auto;
				}
			}
		}
	}
	.main_box{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-top: 36rpx;
		.item{
			width: 49%;
			height: 170rpx;
			background: #F8F8F8;
			border-radius: 2rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin-bottom: 22rpx;
			image{
				width: 68rpx;
				height: 68rpx;
			}
			text{
				font-size: 24rpx;
				margin-top: 21rpx;
				color: #333;
			}
		}
	}
	.vip{
		width: 100%;
		height: 127rpx;
		background: linear-gradient( 90deg, #363330 0%, #12100E 100%);
		border-radius: 4rpx;
		margin-top: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 24rpx;
		box-sizing: border-box;
		text{
			font-size: 28rpx;
			color: #FFEAC8;
		}
		.btn{
			width: 158rpx;
			height: 56rpx;
			background: #F7D5AC;
			text-align: center;
			line-height: 56rpx;
			font-size: 28rpx;
			color: #593015;
		}
	}
	 .user_info{
		 position: relative;
		 .stext{
			 position: relative;
			 z-index: 9; 
			 display: flex;
			 align-items: center;
		 }
		 .vbs{
			 position: absolute;
			 width: 100%;
			 left: 0;
			 top: 0;
			 height: 240rpx;
		 }
		 .text{
			 margin-left: 30rpx;
			 flex: 1;
			 .t1{
				 font-size: 32rpx;
				 color: #333;
				 font-weight: bold;
				 display: flex;
				 align-items: center;
			 }
			 .t2{
				 font-size: 24rpx;
				 color: #999;
				 margin-top: 14rpx;
			 }
			 .time{
				 font-size: 24rpx;
				 color: #FFEAC8;
				 margin-top: 14rpx;
			 }
			 .sss{
				 display: flex;
				 align-items: center;
				 margin-top: 8rpx;
				 image{
					 display: block;
					 height: 40rpx;
					 margin-left: 10rpx;
				 }
			 }
			 .sv{
				 background: linear-gradient(90deg, #e9d2ad 0%, #d1a664 100%);
				 display: inline-block;
				 padding: 4rpx 8rpx;
				 color: #884613;
				 font-weight: bold;
				 border-radius: 5rpx;
				 font-size: 20rpx;
				 position: relative; 
			 }
		 }
		 .image{
			 width: 120rpx;
			 height: 120rpx;
			 border-radius: 50%;
			 overflow: hidden;
			 image{
				 width: 120rpx;
				 height: 120rpx;
			 }
		 }
		 
		 &.svip{
			 height: 240rpx;
			 box-sizing: border-box;
				background: linear-gradient( 90deg, #363330 0%, #12100E 100%);
				border-radius: 4rpx;
				padding:40rpx 30rpx;
				position: relative;
				.vipCode{
					position: absolute;
					right: 0rpx;
					bottom: 0rpx;
					display: flex;
					align-items: center;
					image{
						display: block;
						width: 40rpx;
						height: 40rpx;
						margin-right: 6rpx;
					}
				}
				.text{
					.t1{
						color: #FFEAC8;
						font-size: 34rpx;
					}
				}
				.image{
					 border: 2rpx solid #F7D5AC;
					 width: 140rpx;
					 height: 140rpx;
					 border-radius: 50%;
					 overflow: hidden;
					 image{
						 width: 140rpx;
						 height: 140rpx;
					 }
				} 
		 }
	 }
</style>
